<template>
  <div class="home">
    <van-nav-bar>
      <template #left>
        <van-image
          width="16"
          height="16"
          src="https://huangshen.oss-cn-beijing.aliyuncs.com/yao-shop/favicon.ico"
        />
        <h4 class="local">南阳</h4>
        <van-icon name="arrow-down" />
      </template>
    </van-nav-bar>

    <van-pull-refresh
      v-model="state.loading"
      @refresh="onRefresh"
      style="padding: 5px; margin-bottom: 50px; min-height: 90vh"
    >
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image
            src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun1.png"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun2.png"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun3.png"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun4.png"
          />
        </van-swipe-item>
      </van-swipe>
      <div class="doct-lib">
        <header>
          <h4>查找医生</h4>
          <router-link to="/doctorList"
            ><p class="more">更多<van-icon name="arrow" size="24px" /></p
          ></router-link>
        </header>
        <van-tabs animated swipeable color="#1989fa">
          <van-tab v-for="( item ,index) in state.department" :title="item" :key="index">
            <van-card
              thumb="https://download-sdk.oss-cn-beijing.aliyuncs.com/downloads/IMDemo/avatar/Image1.png"
              v-for="i in index"
              :key="i"
              @click="gotoDoctorInfo(i)"
            >
              <template #title>
                <div class="card-title" v-if="i==1">小王医生</div>
                <div class="card-title" v-if="i==2">小刘医生</div>
                <div class="card-title" v-if="i==3">小牛医生</div>
                <div class="card-title" v-if="i==4">小张医生</div>
              </template>
              <template #desc>
                <div class="card-desc">
                  医生描述
                  白衣天使,即是穿白大褂的护士。意思是说:他们纯洁、善良、富有爱心;他们救死扶伤,童叟无
                </div>
              </template>
              <template #tags>
                <div class="card-tags">
                  <van-rate
                    v-model="value"
                    :size="16"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  <van-tag plain type="success" style="margin-left: 20px"
                    >主治医师</van-tag
                  >
                </div>
              </template>
            </van-card>
          </van-tab>
        </van-tabs>
      </div>
    </van-pull-refresh>
    <van-tabbar route>
      <van-tabbar-item icon="wap-home-o" to="/index">主页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/messages">消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home"> 我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";

export default defineComponent({
  name: "Index",

  created() {},

  setup() {
    //实例化路由
    const router = useRouter();


    //下拉刷新 状态
    const state = reactive({
      loading: false,
      department:[
         '全部科室',
         '眼科',
         '营养科',
         '骨科',
         '口腔科',
         '外科',
         '内科',
         '全科',
         '其他科',
      ]
    });
    //评分
    const value = ref(3);

    //下拉刷新 回调
    const onRefresh = () => {
  
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
        state.count++;
      }, 1000);
    };


    ///===========================
    //去医生信息
    const gotoDoctorInfo = (id) => {
      router.push({
        path: `/doctorInfo/${id}`,
      });
    };

 

    return {
      state,
      onRefresh,
      value,
      gotoDoctorInfo,

    };
  },
});
</script>

<style scoped>
.home {
  background: #f6f7f9;
  text-align: left;
}
.local {
  margin-left: 5px;
}

.doct-lib {
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 2px 10px;
}
.doct-lib header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.doct-lib header h4 {
  margin: 0;
  padding: 0;
}

.doct-lib header .more {
  display: flex;
  align-items: center;
  color: #000;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
}

.card-desc {
  margin: 5px 0;
}

.card-tags {
  display: flex;
  align-items: center;
}
</style>
